<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@include file="../common/base.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 实例化编辑器 -->
<style type="text/css">
.panel-body {
	padding: 0px;
}

.col-sm-3 {
	width: 15%;
	float: left;
}

.col-sm-8 {
	width: 74.4%;
}

.col-sm-9 {
	width: 85%;
	float: left;
}

.col-sm-2 {
	width: 7.666667%;
}

.img {
	margin-left: 18px;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.428571429;
	color: #555;
	vertical-align: middle;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out .15s, box-shadow
		ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-groupEdit {
	width: 50%;
}

.form-groupEdit div {
	display: inline-block;
	margin-left: "10px";
}

#edui1 {
	width: "900px";
}
</style>
</head>
<body>
	<section class="panel panel-default">
		<div class="panel-body">
			<div class="line line-dashed line-lg pull-in"></div>
			<header class="panel-heading"></header>
			<br />
			<br />
			<div class="panel-body">
				<div class="form-group">
					<!-- <label class="col-sm-2 control-label">关于我们</label>-->
					<div class="col-sm-8">
						<input id="id" type="hidden" value="${article.id}"/>
						<textarea id="content" name="content" style="height:800px;">${article.content}</textarea>
					</div>
				</div>
			</div>
		</div>
		<footer class="panel-footer text-right bg-light lter"> 
			<input type="button" id="confirmAddArticle" class="btn btn-success btn-s-xs" value="保存" />
		</footer>
	</section>
</body>
<script type="text/javascript" src="${ctx}/js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src="${ctx}/js/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
	//onloadurl();
	var editor;
	//初始化kindEditor
	function kedit(kedit) {
		editor = KindEditor.create(kedit, {
			resizeType : 1,
			imageSizeLimit : '5MB', //批量上传图片单张最大容量
			imageUploadLimit : 20, //批量上传图片同时上传最多个数
			allowPreviewEmoticons : true,
			allowImageUpload : true,
			fullscreenShortcut : false,
			width : '100%',
			uploadJson : rootPath + '/commonImage/uploadImage/article',
			items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'cut',
					'copy', 'paste', 'plainpaste', 'wordpaste', '|',
					'justifyleft', 'justifycenter', 'justifyright',
					'justifyfull', 'insertorderedlist', 'insertunorderedlist',
					'indent', 'outdent', 'subscript', 'superscript',
					'clearhtml', 'quickformat', '|', 'fullscreen', '/',
					'formatblock', 'title', 'fontname', 'fontsize', '|',
					'forecolor', 'hilitecolor', '|', 'bold', 'italic',
					'underline', 'strikethrough', 'lineheight', 'removeformat',
					'|', 'image', 'multiimage', 'media', 'table', 'hr',
					'emoticons', 'pagebreak', 'link', 'unlink' ],
			afterBlur : function() { //此方法保证能传递数据到后台
				this.sync();
			}
		});
	}

	$(function() {
		kedit('textarea[name="content"]');
	});

	$(function() {
		$("#confirmAddArticle").click(function() {
			var id = $("#id").val();
			var content = editor.html();
			$.ajax({
				url : rootPath + "/article/saveArticle",
				data : {
					'id' : id,
					'content' : content
				},
				type : "post",
				cache : false,
				success : function(result) {
					if (result.resultSuccess) { //判断返回结果，返回成功再取数据
						if(result.id){
							$("#id").val(result.id);
						}
						layer.msg('添加成功');
					} else {
						layer.alert('添加失败！', 3);
					}
				}
			});
		});
	});
</script>
</html>